<template>
  <!-- 工程品质提升新六项措施实施情况 -->
  <a-spin :spinning="loading">
    <title-name :title="`${$route.query.month}月工程品质提升新六项措施实施情况`"></title-name>
    <!-- 处罚列表 -->
    <div style="padding: 0 20px 20px;">
      <div v-if="Object.keys(list).length > 0">
        <a-table v-if="queryParam.type === '4'" style="margin: 0 20px" rowKey="id" bordered :pagination="false" :columns="columns" :dataSource="countVOS"> </a-table>
        <div style="padding: 20px">
          <div class="mb50" v-for="(i, index) in list" :key="index">
            <title-name :title="index"></title-name>
            <div v-for="(item, idx) in i" :key="idx">
              <div class="branchName">{{ idx }}</div>
              <a-card class="mb20">
                本月应实施的栋数：<a>{{ item[item.length - 1].shouldBuildCount || 0 }}</a
                >个<a-divider type="vertical" />目前实际实施的栋数：<a>{{ item[item.length - 1].alreadyBuildCount || 0 }}</a
                >个<a-divider type="vertical" />实施率：<a>{{ item[item.length - 1].shouldBuildCount ? ((item[item.length - 1].alreadyBuildCount * 100) / item[item.length - 1].shouldBuildCount).toFixed(2) + '%' : '0.00%' }}</a
                ><a-divider type="vertical" />考核平均分：<a>{{ item[item.length - 1].checkScore || 0 }}</a>
              </a-card>
              <div class="mb12">各项目实施情况：</div>
              <a-table rowKey="id" bordered :pagination="false" :columns="columns2" :dataSource="item"> </a-table>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <title-name :title="queryParam.nodeName" v-if="queryParam.type.indexOf('.') >= 0"></title-name>
        <Empty description="暂无数据" />
      </div>
    </div>
    <!-- 添加实施情况 -->
    <dialog-form ref="dialogForm" :visible.sync="visible" edit-model="E" headerTitle="添加实施情况" :width="1000" :form="form" :forms.sync="forms" :formList="formList" :rules="rules" @confirm="submitForm">
      <!-- 尚未实施的楼栋及计划实施时间 -->
      <template slot="formFooter">
        <!-- 添加按钮 -->
        <a-button class="mb12" type="primary" icon="plus" @click="handleAdd">添加尚未实施计划</a-button>
        <!-- 表格 -->
        <a-table rowKey="id" bordered :pagination="false" :columns="columns3" :dataSource="forms.notBuildCountTime || []"> </a-table>
      </template>
    </dialog-form>
  </a-spin>
</template>

<script>
import { getSix, updateSix } from '@/api/quality/qualityMonth' // api
import { Empty } from 'ant-design-vue' // 无数据提示
import DialogForm from '@/components/DialogForm' // 表单弹窗

export default {
  name: 'SixMeasuresImplementation',
  components: {
    Empty,
    DialogForm
  },
  props: {
    // 请求参数
    queryParam: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      loading: false, // 加载控件
      form: {}, // 编辑表单
      forms: {}, // 提交表单
      visible: false, // 弹窗显隐控件
      columns: [
        {
          title: '序号',
          width: 80,
          dataIndex: 'index',
          align: 'center',
          customRender() {
            return arguments[1].branchComName !== '平均值' ? arguments[2] + 1 : ''
          }
        },
        {
          title: '分公司名称',
          dataIndex: 'branchComName'
        },
        {
          title: '铝模',
          dataIndex: 'score1',
          customRender(e) {
            return e ?? '————'
          }
        },
        {
          title: '楼梯钢模',
          dataIndex: 'score2',
          customRender(e) {
            return e ?? '————'
          }
        },
        {
          title: '地面一次成型',
          dataIndex: 'score3',
          customRender(e) {
            return e ?? '————'
          }
        },
        {
          title: '地上外墙通丝螺杆',
          dataIndex: 'score4',
          customRender(e) {
            return e ?? '————'
          }
        },
        {
          title: '地下室断水',
          dataIndex: 'score5',
          customRender(e) {
            return e ?? '————'
          }
        },
        {
          title: '机房/屋面一次成优',
          dataIndex: 'score6',
          customRender(e) {
            return e ?? '————'
          }
        },
        {
          title: '平均值',
          dataIndex: 'average',
          customRender(e) {
            return e ?? '————'
          }
        }
      ],
      columns3: [
        {
          title: '序号',
          width: 80,
          dataIndex: 'index',
          align: 'center',
          customRender() {
            return arguments[2] + 1
          }
        },
        {
          title: '尚未实施楼栋',
          width: 200,
          dataIndex: 'name',
          customRender: (e, record) => {
            return <BaseInput v-model={record.name} />
          }
        },
        {
          title: '计划实施时间',
          dataIndex: 'time',
          customRender: (e, record) => {
            return <a-month-picker v-model={record.time} valueFormat="YYYY-MM" />
          }
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: 80,
          customRender: (text, record, index) => {
            return (
              <a
                class="del_btn"
                onClick={() => {
                  this.forms.notBuildCountTime.splice(index, 1)
                }}
              >
                删除
              </a>
            )
          }
        }
      ],
      rules: {
        shouldBuildCount: [{ required: true, message: '请输入应实施的栋数（个）', trigger: 'change' }],
        alreadyBuildCount: [{ required: true, message: '请输入已实施的栋数（个）', trigger: 'change' }],
        position: [{ required: true, whitespace: true, message: '请输入实施部位', trigger: 'change' }],
        remarks: [{ required: true, whitespace: true, message: '请输入备注', trigger: 'change' }]
      }, // 校验规则
      formList: [
        { type: 'BaseInputNumber', attrs: { min: 0 }, precision: 0, keyName: 'shouldBuildCount', label: '应实施的栋数（个）', span: 12 },
        { type: 'BaseInputNumber', attrs: { min: 0 }, precision: 0, keyName: 'alreadyBuildCount', label: '已实施的栋数（个）', span: 12 },
        { type: 'BaseInput', keyName: 'position', label: '实施部位', span: 12 },
        { type: 'BaseTextarea', keyName: 'remarks', label: '备注', span: 24 }
      ], // 弹窗表单配置项
      countVOS: [], // 统计表格
      list: {} // 列表
    }
  },
  computed: {
    // 表头
    columns2() {
      let columns = [
        {
          title: '序号',
          width: 70,
          dataIndex: 'index',
          align: 'center',
          customRender() {
            return arguments[1].type ? arguments[2] + 1 : ''
          }
        },
        {
          title: '项目名称',
          // width: 100,
          dataIndex: 'projectName'
        },
        {
          title: '应实施的栋数（个）',
          width: 80,
          dataIndex: 'shouldBuildCount',
          customRender(e) {
            return e || 0
          }
        },
        {
          title: '已实施的栋数（个）',
          width: 80,
          dataIndex: 'alreadyBuildCount',
          customRender(e) {
            return e || 0
          }
        },
        {
          title: '实施部位',
          dataIndex: 'position'
        },
        {
          title: '尚未实施的楼栋及计划实施时间',
          dataIndex: 'notBuildCountTime',
          customRender: (e) => {
            let str = ''
            if (e) {
              const list = JSON.parse(e)?.map((i) => <div>{(i.name || '') + (i.name && i.time ? ':' : '') + (i.time || '')}</div>)
              return list
            }
            return str
          }
        },
        {
          title: '考核得分',
          width: 80,
          dataIndex: 'checkScore'
        },
        {
          title: '备注',
          width: 100,
          dataIndex: 'remarks'
        }
      ]
      // 节点若为分公司则添加操作按钮
      this.queryParam.branchComId &&
        (this.$route.query.editModel == 2 || this.$route.query.editModel == 4) &&
        columns.push({
          title: '操作',
          dataIndex: 'actions',
          width: 80,
          align: 'center',
          customRender: (text, record) => {
            return (
              record.type && (
                <a
                  onClick={() => {
                    let form = this.$clone(record)
                    form.notBuildCountTime && (form.notBuildCountTime = JSON.parse(form.notBuildCountTime))
                    this.form = form
                    this.visible = true
                  }}
                >
                  编辑
                </a>
              )
            )
          }
        })
      return columns
    }
  },
  mounted() {
    // 初始化
    this.init()
  },
  methods: {
    /**
     * 添加尚未实施的楼栋及计划实施时间
     */
    handleAdd() {
      // 若表单有数据则添加在列表后，不存在则直接覆盖一行
      if (this.forms?.notBuildCountTime) {
        this.forms.notBuildCountTime.push({ id: Date.now() })
      } else {
        this.$set(this.forms, 'notBuildCountTime', [{ id: Date.now() }])
      }
    },
    /**
     * 初始化
     */
    init() {
      this.loading = true
      // 请求检查情况
      getSix(this.queryParam)
        .then((res) => {
          if (res?.code === '0') {
            this.countVOS = res.data?.countVOS || []
            this.list = res.data?.map || {}
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 提交表单
     * e：表单
     */
    submitForm(e) {
      let form = this.$clone(e)
      this.$refs.dialogForm.loading = true
      form.qualityMonthId = this.$route.query.id
      form.isAdjust = this.$route.query.isAdjust
      // 过滤《尚未实施的楼栋及计划实施时间》空数据且格式化
      if (form.notBuildCountTime) {
        form.notBuildCountTime = form.notBuildCountTime.filter((i) => i.name || i.time)
        if (form.notBuildCountTime.length) {
          form.notBuildCountTime = JSON.stringify(form.notBuildCountTime)
        } else {
          delete form.notBuildCountTime
        }
      }
      updateSix(form)
        .then((res) => {
          if (res.code === '0') {
            this.init()
            this.$message.success('提交成功！')
            this.visible = false
          }
        })
        .finally(() => {
          this.$refs.dialogForm.loading = false
        })
    }
  }
}
</script>

<style scoped>
.mb50 {
  margin-bottom: 50px;
}
</style>
